import { Component } from "react"
import { Menu } from 'antd';
import {  MailOutlined } from '@ant-design/icons';

import { useNavigate, useParams } from "react-router-dom";
import {
    Outlet,
    Link
} from 'react-router-dom';
import { Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;

const WrapComps = props => {
    let navigate = useNavigate();
    let params = useParams();
    let Element = props.el;
    return <Element params={params} navigate={navigate} {...props} />
}

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: "antd、路由、redux",
            collapsed: false,
        }
    }
    componentDidMount(){
       this.setState({
           title:"state改变"
       },()=>{
        console.log(this.state,"state回调")
    })
    }
    handleClick = e => {
        console.log('click ', e);
    };
    toggleCollapsed = (collapsed, type) => {
        console.log(collapsed,type)
        this.setState({
          collapsed: !this.state.collapsed,
        });
      };
    render() {
        return (
            <div className="box">
                <Layout className="layout_box" >
                    <Sider width={256} collapsible collapsed={this.state.collapsed} onCollapse={this.toggleCollapsed}>
                        <Menu
                            onClick={this.handleClick}
                            style={{ width: 256 }}
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            mode="inline"
                        >
                            <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
                                <Menu.Item key="/home" to="/home">
                                    <Link to="/home">
                                        首页
                                    </Link>
                                </Menu.Item>
                                <Menu.Item key="/list" to="/list">
                                    <Link to="/list">
                                        列表页
                                    </Link>
                                </Menu.Item>
                                <Menu.Item key="/baidu" to="/baidu">
                                    <Link to="/baidu">
                                        百度
                                    </Link>
                                </Menu.Item>
                                <Menu.Item key="/goods" to="/goods">
                                    <Link to="/goods">
                                        商品
                                    </Link>
                                </Menu.Item>
                            </SubMenu>
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header>Header</Header>
                        <Content>
                           <Outlet />
                        </Content>
                        <Footer>Footer</Footer>
                    </Layout>
                </Layout>


            </div>
        )
    }

}

export default App;